<template>
  <div>
    <el-card class="search-card">
      <basic-table-form
        ref="formData"
        :colNumOfRow="4"
        :formItemWidth="'120px'"
        :formColumns="formItemList"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :isScalingBtn="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      >
      </basic-table-form>
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showSelectCol="false"
        :showActionCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="460"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            v-if="showBtn('导出') && supplierExportConfig.supplier"
            size="mini"
            type="primary"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
            >导出</el-button
          >
          <el-button
            v-if="showBtn('编辑')"
            size="mini"
            type="primary"
            @click="handleAddFreight"
            >修改开票名称</el-button
          >
        </div>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getBtnsId } from '@/libs/btnsPermission';
import BasicPage from '@/mixins/supplier/basicPage';
import BasicTableForm from '@/components/supplier/BasicForm';
import BasicTable from '@/components/supplier/BasicTable';
import { FORM_ITEM_LIST, initTableColumns } from './constants';
import {
  queryInvoicingSupplierRecordService,
  exportInvoicingSupplieListService,
} from '@api/supplier/management/invoicingSupplier';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';
import { createExcelByExport } from '@/utils/bizUtils';

export default {
  mixins: [ BasicPage ], // 分页数据及方法 表单基础方法
  components: {
    BasicTableForm,
    BasicTable
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  data () {
    return {
      showSearchForm: false,
      formItemList: FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        columns: initTableColumns(this),
        loading: false
      },
      formData: {
        invoiceSupplierCode: '', // 供应商代码
        invoiceSupplierNameOld: '', // 供应商名称
        modifyPerson: '', // 创建人
        modifyTime: '', // 创建时间
        modifyTimeStart: '', // 创建开始时间
        modifyTimeEnd: '', // 创建开始时间
      },
    };
  },
  created () {
    this.getTableData();
  },
  methods: {
    // 创建日期赋值
    formatCreateDate () {
      const { modifyTime } = this.formData;
      this.formData.modifyTimeStart = modifyTime ? modifyTime[0] : '';
      this.formData.modifyTimeEnd = modifyTime ? modifyTime[1] : '';
    },
    // 获取表格数据
    getTableData () {
      this.formatCreateDate()
      let data = {
        ...this.formData,
        ...this.pagination
      };
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      this.tableInfo.loading = true;
      queryInvoicingSupplierRecordService(data).then((res) => {
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          const { records, total } = res.result;
          this.tableInfo.list = records;
          this.pagination.total = total;
        }
      }).catch(() => {
        this.tableInfo.loading = false;
      });
    },
    // 新增
    handleAddFreight () {
      this.$router.push({ name: 'editInvoicingSupplier' })
    },
    // 查看绑定关系
    handleViewLog (row) {
      this.$router.push({ name: 'bindRelationView', query: { invoiceSupplierId: row.invoiceSupplierId } })
    },
    // 导出
    handleExport () {
      this.formatCreateDate()
      this.exportLoading = true;
      // exportInvoicingSupplieListService({ ...this.formData, size: 1000 }).then(res => {
      exportInvoicingSupplieListService({ ...this.formData }).then(res => {
        this.exportLoading = false;
        createExcelByExport({ excelTitle: '开票供应商信息', res })
      }).catch(() => {
        this.exportLoading = false;
      })
    }
  }
};
</script>
